<template>
  <div>
    <div class="simple-node" @click="toSet">
      <div class="h24 flx-b pl10 pr10" style="width:100%;background:#e08a11;color:#fff;">
        <i v-if="type===1" class="fa fa-user"/>
        <i v-if="type===2" class="fa fa-cog"/>
        <i v-if="type===6" class="fa fa-retweet"/>
        <i v-if="type===7" class="fa fa-share-alt"/>
        <div style="color:#000;font-size:18px;" class="cpt" @click="removeNode">&times;</div>
      </div>
      <div style="height:40px;" class="flx-c">
        <div v-if="type===1" >普通节点</div>
        <div v-if="type===2" >脚本节点</div>
        <div v-if="type===6" >循环节点</div>
        <div v-if="type===7" >子流程</div>
      </div>
    </div>
    <Vline :showBtn="showBtn" @addNode="onAddNode"></Vline>
  </div>
</template>

<script>
import Vline from './Vline'
export default {
  components: {
    Vline
  },
  props: {
    hasCondition: {
      type: Boolean,
      default: false
    },
    type: {
      type: Number,
      default: 1
    },
    showBtn: {
      type: Boolean,
      default: true
    }
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
    removeNode () {
      this.$emit('removeNode', { type: this.type })
    },
    onAddNode (type) {
      this.$emit('addNode', type)
    },
    toSet () {
      this.$emit('toSetNode', { type: this.type, hasCondition: this.hasCondition })
    }
  }
}
</script>
<style lang="less" scoped>
.simple-node{
  width:140px;
  margin:0 auto;
  box-shadow: 0 2px 10px #999;
  &:hover{
    cursor:pointer;
    box-shadow: 0 2px 30px #106fb7;
  }
}
</style>
